<template>
  <div class="container">
    <h1 v-if="dat === 1">
      <el-table :data="luku" style="width: 100%">
        <el-table-column prop="license_plate" label="车牌号" width="180">
        </el-table-column>
        <el-table-column
          prop="vehicleId"
          label="欢迎进入鼎盛停车场"
          width="180"
        >
        </el-table-column>
      </el-table>
    </h1>
    <h1 v-else-if="dat === 2">22222</h1>
    <h1 v-else>{{ currentTime }}</h1>
  </div>
</template>
<script>
import axios from "axios";
import backgroundImage from "@/assets/images/256734-1P10H1203517.jpg";
import {
  getluku,
  getqingchu,
  getpanduan,
  getchuku,
} from "@/api/system/storagemanagement";

export default {
  data() {
    return {
      dat: "",
      spacequantityList: [],
      currentTime: "",
      luku: [], // 将 luku 初始化为空数组
    };
  },
  mounted() {
    this.startFetchData();
    this.updateTime();
    this.intervalId = setInterval(() => {
      this.updateTime();
    }, 1000);
  },
  beforeUnmount() {
    this.stopFetchData();
    clearInterval(this.intervalId);
  },
  methods: {
    updateTime() {
      this.currentTime = new Date().toLocaleString();
    },
    startFetchData() {
      this.fetchDataInterval = setInterval(() => {
        this.fetchData();
        if (this.dat === 1) {
          this.cloneGetxiaohui();
        }
      }, 10000);
    },
    stopFetchData() {
      clearInterval(this.fetchDataInterval);
    },
    fetchData() {
      getpanduan()
        .then((respon) => {
          this.dat = Number(respon.data.license);
          this.handleDataChange(); // 在获取数据成功后调用handleDataChange方法
          console.log(respon.data.license);
        })
        .catch((error) => {
          console.error("Error fetching data:", error);
        });
    },
    handleDataChange() {
      if (this.dat === 1) {
        this.callGetAmeLine(); // 调用getAmeLine函数
      } else if (this.dat === 2) {
        this.getMianeChuku(); // 调用getchuku函数02
      } else {
        this.currentTime = new Date().toLocaleString();
      }
    },
    callGetAmeLine() {
      getluku()
        .then((respon) => {
          // 处理getAmeLine的响应
          this.luku = respon.data; // 将 respon.data 赋值给 this.luku 数组
        })
        .catch((error) => {
          console.error("Error calling getAmeLine:", error);
        });
    },
    callGetchuku() {
      window.location.href =
        "http://localhost:8080/alipay/pay?rnumber=" +
        this.spacequantityList.rnumber +
        "&amount=" +
        this.spacequantityList.amount +
        "&vehicleInfo=" +
        this.spacequantityList.vehicleInfo;
      //window.open();
      // },
    },
    getMianeChuku() {
      getchuku().then((respon) => {
        this.spacequantityList = respon.data[0];
        console.log(respon.data[0]);
        console.log("测试" + this.spacequantityList.rnumber);
        if (this.spacequantityList != null) {
          this.callGetchuku();
        }
      });
    },
    cloneGetxiaohui() {
      getqingchu().then((respon) => {
        this.dat = Number(respon.data.license);
      });
    },
  },
};
</script>

<style>
.container {
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  height: 100vh; /* 将容器的高度设置为视口高度 */
  display: flex;
  justify-content: center;
  align-items: center;
  /* background-image: url("https://ding-sheng-parking-system.oss-cn-shenzhen.aliyuncs.com/%E5%85%B0%E5%8D%9A%E5%9F%BA%E5%B0%BC.jpg"); */
}

.container {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100vh;
  background-color: #f0f0f0;
}

.content-wrapper {
  text-align: center;
}

h1 {
  font-size: 3rem;
  margin-bottom: 1rem;
}

p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
}

button {
  font-size: 1rem;
  padding: 0.8rem 1.5rem;
  background-color: #007bff;
  color: #fff;
  border: none;
  border-radius: 0.5rem;
  cursor: pointer;
}
</style>
